<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<link href="" rel="stylesheet">
	<script>
		window.onload = function () {
			var ipt = document.getElementById('ipt');
			var ipt2 = document.getElementById('ipt2');
			var ipt3 = document.getElementById('ipt3');

			ipt.onblur = function(){
  			var val = this.value;
				var tip = this.nextSibling;
				checkTel(val,tip);
			}

			ipt2.onblur = function(){
				var val = this.value;
				var tip = this.nextSibling;
				checkID(val,tip);
			} 

			ipt3.onblur = function(){
				var val = this.value;
				var tip = this.nextSibling;
				checkEmail(val,tip);
			} 
		}
		function checkID(value,tip) {
			var reg = /(^(\d{15}|\d{18}|(\d{17})(X|x))?$)/;
			if(value == ''){
				return false;
			}else{
				if(reg.test(value)){
					tip.className = 'fine';
					tip.innerText = '正确';
				}else{
					tip.className = 'error';
					tip.innerText = '错误';
				}
			}
		}
		function checkTel(value,tip) {
			var reg = /^1[34578]\d{9}$/;
			if(value == ''){
				return false;
			}else{
				if(reg.test(value)){
					tip.className = 'fine';
					tip.innerText = '正确';
				}else{
					tip.className = 'error';
					tip.innerText = '错误';
				}
			}
		}

		function checkEmail(value,tip) {
			var reg = /^\w+@[a-z0-9]+\.[a-z]+$/;
			if(value == ''){
				return false;
			}else{
				if(reg.test(value)){
					tip.className = 'fine';
					tip.innerText = '正确';
				}else{
					tip.className = 'error';
					tip.innerText = '错误';
			}
		}
	}
	</script>
	<style>
		input{
			padding:5px 10px;
		}
		.error{
			color: red;
		}
		.fine{
			color:green;
		}
	</style>
</head>
<body>
	<p>请输入要验证的文字 按下tab</p>
	<ul>
		<li><p>匹配手机号</p></li>
		<li><input id="ipt"/ tabindex="1"><span></span></li>
		<li><p>匹配身份证号码</p></li>
		<li><input id="ipt2"/ tabindex="2"><span></span></li>
		<li><p>匹配邮箱</p></li>
		<li><input id="ipt3"/ tabindex="3"><span></span></li>
	</ul>
</body>
</html>